import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Divider, Button, Icon, Skeleton } from 'antd';
import { useUserTrend } from '../../hooks';
import { getHour } from '../../utils';
// import { getHour, getQualityTag } from '../../utils';
import { WorkSaturationLine } from '../index';
import styles from './index.less';

// 滚动到页面指定元素
const scrollToAnchor = ({ eleId, options }) => {
    if (eleId) {
        const anchorElement = document.getElementById(eleId);
        if (anchorElement) {
            anchorElement.scrollIntoView(options ? { ...options } : true);
        }
    }
};

// 个人工作透视 - 工作概况
// 2020-4-7:注释的代码为临时隐藏，后面可能还需要

const WorkOverview = ({ data = {}, query = {} }) => {
    const [visibleChart, setVisibleChart] = useState(false);

    // 拉取图表数据
    const [loading, userTrendData] = useUserTrend(query);

    // const evalRankObj = getQualityTag(data.evalRank);
    // const columns = [
    //     {
    //         title: '产品线',
    //         dataIndex: 'productName',
    //         key: 'productName'
    //     },
    //     {
    //         title: '项目组',
    //         dataIndex: 'projectGroupName',
    //         key: 'projectGroupName'
    //     },
    //     {
    //         title: '任务数',
    //         dataIndex: 'totalTaskNum',
    //         key: 'totalTaskNum'
    //     },
    //     {
    //         title: '工作量',
    //         dataIndex: 'planTotalWorkloadNum',
    //         key: 'planTotalWorkloadNum',
    //         render: text => `${getHour(text)} 小时`
    //     }
    // ];

    // 走势图图表展开和缩起
    useEffect(() => {
        if (visibleChart) {
            scrollToAnchor({
                eleId: 'saturaChart',
                options: {
                    behavior: 'smooth'
                }
            });
        }
    }, [visibleChart]);

    return (
        <Card title={`${data.employeeName ? data.employeeName : ''}工作概况`} className={styles.workOverview}>
            <Row style={{ marginBottom: 16 }}>
                <Col span={3} className={styles.colName}>
                    公司：
                </Col>
                <Col span={8}>{data.companyName}</Col>
                <Col span={3} className={styles.colName}>
                    部门：
                </Col>
                <Col span={10}>{data.departmentName}</Col>
            </Row>
            <Row style={{ marginBottom: 16 }}>
                <Col span={3} className={styles.colName}>
                    职位：
                </Col>
                <Col span={8}>{data.postName}</Col>
                <Col span={3} className={styles.colName}>
                    职级：
                </Col>
                <Col span={10}>{data.employeeRank}</Col>
            </Row>
            <Row>
                <Col span={5} className={styles.colName}>
                    是否考核：
                </Col>
                <Col span={19}>{data.evalFlag === 0 ? `否(${data.noevalReason})` : '是'}</Col>
            </Row>
            <div style={{ display: data.evalFlag === 0 ? 'none' : 'block' }}>
                <Divider />

                <div className={styles.staTitle}>
                    <Row type="flex" align="middle">
                        <Col span={12}>计划与实际工作量</Col>
                        <Col span={12} style={{ textAlign: 'right' }}>
                            <Button
                                type="link"
                                className="linkbtn"
                                onClick={() => {
                                    setVisibleChart(!visibleChart);
                                }}
                            >
                                查看饱和度走势图
                                <Icon type={visibleChart ? 'caret-up' : 'caret-down'} />
                            </Button>
                        </Col>
                    </Row>
                </div>
                <div className={`${styles.staTitle} ${styles.subStaTitle}`}>
                    上{!data.reportType || data.reportType === 1 ? '周' : '月'}实际
                </div>
                <Row style={{ marginBottom: 16 }}>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {data.lastActualTotalWorkloadSaturability || '-'}
                                {data.lastActualTotalWorkloadSaturability ? <span className={styles.unit}>%</span> : ''}
                            </p>
                            <p className={styles.text}>实际饱和度</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {getHour(data.lastActualTotalWorkloadNum) || '-'}
                                {data.lastActualTotalWorkloadNum ? <span className={styles.unit}>小时</span> : ''}
                            </p>
                            <p className={styles.text}>实际</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {getHour(data.lastStandardTotalWorkloadNum) || '-'}
                                {data.lastStandardTotalWorkloadNum ? <span className={styles.unit}>小时</span> : ''}
                            </p>
                            <p className={styles.text}>额定</p>
                        </div>
                    </Col>
                </Row>

                <Divider />

                <div className={`${styles.staTitle} ${styles.subStaTitle}`}>
                    本{!data.reportType || data.reportType === 1 ? '周' : '月'}计划
                </div>
                <Row style={{ marginBottom: 16 }}>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {data.planTotalWorkloadSaturability || '-'}
                                {data.planTotalWorkloadSaturability ? <span className={styles.unit}>%</span> : ''}
                            </p>
                            <p className={styles.text}>计划饱和度</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {getHour(data.planTotalWorkloadNum) || '-'}
                                {data.planTotalWorkloadNum ? <span className={styles.unit}>小时</span> : ''}
                            </p>
                            <p className={styles.text}>计划</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {getHour(data.standardTotalWorkloadNum) || '-'}
                                {data.standardTotalWorkloadNum ? <span className={styles.unit}>小时</span> : ''}
                            </p>
                            <p className={styles.text}>额定</p>
                        </div>
                    </Col>
                </Row>
                {visibleChart && (
                    <div id="saturaChart" style={{ width: '100%', height: 270, margin: '20px auto 10px' }}>
                        <Skeleton active loading={loading}>
                            <WorkSaturationLine
                                visible={visibleChart}
                                data={userTrendData}
                                reportType={query.reportType}
                            />
                        </Skeleton>
                    </div>
                )}
                <Divider />

                <div className={styles.staTitle}>本{data.reportType === 1 ? '周' : '月'}任务完成情况</div>
                <Row style={{ marginBottom: 16 }}>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>{data.totalTaskNum || '-'}</p>
                            <p className={styles.text}>总任务</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>{data.doneTaskNum || '-'}</p>
                            <p className={styles.text}>已完成</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num} style={{ color: '#FF4D4F' }}>
                                {(data.overdueDoneTaskNum || data.overdueDoneTaskNum === 0) &&
                                (data.overdueNonexecutionTaskNum || data.overdueNonexecutionTaskNum === 0)
                                    ? String(data.overdueDoneTaskNum || 0 + data.overdueNonexecutionTaskNum || 0)
                                    : '-'}
                            </p>
                            <p className={styles.text}>逾期</p>
                        </div>
                    </Col>
                </Row>
                <Divider />

                {/* <div className={styles.staTitle}>工作质量</div>
                <Row style={{ marginBottom: 16 }}>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p className={styles.num}>
                                {data.evalScore}
                                <span className={styles.unit}>分</span>
                            </p>
                            <p className={styles.text}>平均版本质量</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                            <p style={{ color: evalRankObj.color }}>{evalRankObj.label}</p>
                            <p className={styles.text}>评估结果</p>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles.staBox}>
                        <p className={styles.num}>{data.avageDayBugNum}</p>
                        <p className={styles.text}>日均Bug量</p>
                    </div>
                    </Col>
                </Row> */}
                {/* <Divider />
                <div className={styles.staTitle}>参与产品与项目组</div>
                <Table rowKey="id" columns={columns} dataSource={data.rows} pagination={false} /> */}
            </div>
        </Card>
    );
};

export default WorkOverview;
